<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
</head>
<body >
<center>
  <h1>所有用户数据</h1>
  <table border="1px" id="aaa">
    <tr>
      <th>id</th>
      <th>名称</th>
      <th>密码</th>
      <th>年龄</th>
      <th>电话</th>
      <th>邮箱</th>
      <th>所属部门</th>
      <th>操作</th>
    </tr>
    <tr >
      <td >id</td>
      <td >名称</td>
      <td >密码</td>
      <td >年龄</td>
      <td >电话</td>
      <td >邮箱</td>
      <td>人事部</td>
      <td >
        <a >修改</a>
        <a >删除</a>
      </td>
    </tr>
  </table>
</center>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $.ajax({
    url:"/user/findUsers.do",
    type:"post",
    dataType:"json",
    success:function (result) {
      // 获取后端反馈的内容，是json格式的数据[{1,"zhangsan1",18},{2,"zhangsan2",19},{3,"zhangsan3",20}]
      let list = result.data;
      console.log(list);
      // 将获取的数据转换为数组类型
      let arr = JSON.parse(list);
      console.log("转换后的数据长度是："+arr.length); // 9

      // 获取表格对象
      let table = $("#aaa");
      // 将转换后的数组对象进行变量
      for (let i = 0; i < arr.length; i++) {
        // 获取数组中每一个元素
        let user = arr[i];
        // 先创建一行数据
        let tr = "<tr >\n" +
                "      <td >"+user.id+"</td>\n" +
                "      <td >"+user.username+"</td>\n" +
                "      <td >"+user.password+"</td>\n" +
                "      <td >"+user.age+"</td>\n" +
                "      <td >"+user.phone+"</td>\n" +
                "      <td >"+user.email+"</td>\n" +
                "      <td>人事部</td>\n" +
                "      <td >\n" +
                "        <a href='update.html?id="+user.id+"'>修改</a>\n" +
                "        <a href='/user/delete.do?id="+user.id+"'>删除</a>\n" +
                "      </td>\n" +
                "    </tr>";

        // 将获取的每一行数据，添加到表格对象中
        table.append(tr);
      }

    }
  })
</script>
</body>
</html>